export const RForm = () => ({
  tag: 'r-form',
  ref: '',
  style: '',
  class: '',
  props: [
    { prop: 'columns', type: 'Array' },
    { prop: 'submit', type: 'Object' }
  ],
  events: [
    { event: 'change', args: 'formData', func: '', content: '' },
    { event: 'submit', args: 'formData', func: '', content: '' }
  ],
  methods: {}
})

export const RSearchForm = () => ({
  tag: 'r-search-form',
  ref: '',
  style: '',
  class: '',
  props: [{ prop: 'columns', type: 'Array' }],
  events: [
    { event: 'change', args: 'formData' },
    { event: 'search', args: 'formData' }
  ]
})

export const RTable = () => ({
  tag: 'r-table',
  ref: '',
  style: '',
  class: '',
  props: [
    {
      prop: 'columns',
      type: 'Array',
      value: `(function (){ return [{ name: 'name', label: '名称' },
        { name: 'age', label: '年龄' }]})()`
    },
    {
      prop: 'options',
      type: 'Array',
      value: `[{ name: 'view', label: '查看', type: 'info' },
        { name: 'edit', label: '编辑', type: 'primary' },
        { name: 'delete', label: '删除', type: 'danger' }]`
    },
    { prop: 'data', type: 'Array', value: `[{ name: 'lisi', age: 20 }]` }
  ],
  events: [{ event: 'option', args: 'opt,rowData,tableData', func: 'optionHandler' }],
  options: []
})

export const ELCard = () => ({
  tag: 'el-card',
  ref: '',
  style: '',
  class: '',
  props: [
    { prop: 'header', type: 'String', value: 'card' },
    { prop: 'body-style', type: 'Object' },
    { prop: 'shadow', type: 'String' }
  ],
  children: []
})

export const ELDialog = () => ({
  tag: 'el-dialog',
  ref: '',
  style: '',
  class: '',
  props: [
    { prop: 'visible.sync', type: 'Boolean', name: 'visible', value: 'true' },
    { prop: 'header', type: 'String' },
    { prop: 'show-close', type: 'Boolean' },
    { prop: 'shadow', type: 'String' }
  ],
  events: [{ event: 'open', args: 'data' }, { event: 'opened' }, { event: 'close' }, { event: 'closed' }],
  children: []
})

export const RDialogForm = () => ({
  tag: 'r-dialog-form',
  ref: '',
  style: '',
  class: '',
  props: [{ prop: 'columns', type: 'Array' }],
  events: [{ event: 'submit', args: 'formData' }]
})

export const RDialogForm2 = () => ({
  tag: 'r-dialog-form2',
  ref: '',
  style: '',
  class: '',
  props: [
    {
      prop: 'columns',
      type: 'Array'
    },
    {
      prop: 'visible',
      type: 'Boolean'
    }
  ],
  events: [
    {
      event: 'submit',
      args: 'formData'
    }
  ]
})

// ELTable

// ELDialog

// 1. 最底层只能是一个 组件,
//     正例: <template> <el-card>...</el-card></template>,
//     反例: <template><el-card>...</el-card> <el-card>...</el-card></template>
// 2. ref 属性 必填，且唯一  （方便做 增删 操作）
// 完整的例子
const componentsJson = {
  tag: 'el-card',
  ref: 'card',
  props: [{ prop: 'header', type: 'String', value: 'header' }],
  children: [
    {
      tag: 'r-form',
      ref: 'form',
      style: 'text-align: left; width: 40%; margin-left: 30%',
      props: [
        {
          prop: 'columns',
          type: 'Array',
          name: 'formColumns'
        },
        { prop: 'submit', type: 'Object', name: 'formSubmit' }
      ],
      events: [{ event: 'change', func: 'onChange' }]
    },
    {
      tag: 'r-form',
      ref: 'form2',
      style: 'text-align: left; width: 40%; margin-left: 30%',
      props: [],
      events: [{ event: 'submit', func: 'onSubmit' }]
    }
  ]
}

// {
//   actions: [
//     {
//       name: 'submit',
//       events: [
//         {
//           ref: 'form2',
//           event: 'submit'
//         },
//         {
//           ref: 'table',
//           event: 'refresh'
//         }
//       ]
//     }
//   ]
// }

// 1. 配置 组件 json
// 2. 动态显示 json
// 3. 展示 组件tree (选中用)
